<template>
	<view class="main">
		<view
			style="display: flex;align-items: center;background-color: white;justify-content: space-between;font-size: 28	rpx;">
			<view style="margin-left:40rpx;color: #666666;">
				配送方式
			</view>
			<view
				style="display: flex;margin-right:45rpx; width: 130rpx;height: 50rpx;background-color: red;color: white;border-radius: 50rpx;justify-content: center;align-items: center;">
				快递
			</view>
		</view>
		<view style="display: flex; background-color: white;height:60rpx;align-items: center;">
			<view style="width: 100%;height: 2rpx;background-color: #EBEBEB;margin: 25rpx 0;">
			</view>
		</view>

		<navigator url="/pages/address/list?addStatus=1" hover-class="none" class="address_box"
			v-if="addrId.id !== undefined" style="margin-top:20rpx;">
			<image src="../../static/border.png" class="border" mode="widthFix"></image>
			<image src="../../static/right.png" class="right" mode="widthFix"></image>
			<image src="../../static/location2.png" class="location2" mode="widthFix"></image>
			<view class="info">
				<view class="info2">
					<view class="name">{{addrId.lianxiren}}</view>
					<view class="mobile">
						{{addrId.shoujihao}}
					</view>
				</view>
				<view class="address">
					{{addrId.sheng}} {{addrId.shi}} {{addrId.qu}}
					{{addrId.dizhi}}
				</view>
			</view>
		</navigator>
		<!-- 无地址显示 选择收货地址 -->
		<navigator url="/pages/address/list?addStatus=1" hover-class="none" class="address_box address_box2"
			v-if="addrId.id == undefined">
			<image src="../../static/border.png" class="border" mode="widthFix"></image>
			<image src="../../static/right.png" class="right right2" mode="widthFix"></image>

			<image src="../../static/location2.png" class="location2" mode="widthFix"></image>
			<view class="info">
				<view class="title">
					选择收货地址
				</view>
			</view>
		</navigator>
		<view v-for="(item,index) in checkedArr" :key=index class="sellerbox">
			<view class="goods_box">
				<view class="goods_list">
					<view class="goods_info">
						<image style="height: 150rpx;" class="goodsimg" :src="item.tupian_url[0].url" mode="heightFix">
						</image>
						<view class="info">
							<view class="">
								<view class="goodsname">
									{{item.goods_name}}
								</view>
							</view>
							<view class="goods_num">
								<view style="display: flex;font-weight: 700;margin-top: -50rpx; color: blue;">
									￥{{item.goods_price}}
								</view>
								<view>
									<u-number-box v-model="checkedArr[index].count" :min="1" :max="item.count"
										:size="26" @change="valChange">
									</u-number-box>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>


		<view class="box">
			<view class="list">
				<view>配送方式</view>
				<view>物流配送</view>
			</view>
		</view>
		<!-- 可以填写订单备注 -->
		<view class="box">
			<view class="list">
				<view>订单备注</view>
				<view class="inputbox">
					<input type="text" v-model="remarks" maxlength="50" placeholder="请输入订单备注(50字以内)" />
				</view>
			</view>
		</view>

		<view class="box">
			<view class="title">选择支付方式</view>
			<view class="paytype">
				<u-radio-group v-model="type" style="width: 100%;">
					<view class="u-radio-group_box">
						<block>
							<view class="type_list" @click="radioGroupChange(3)">
								<view class="box_radio_group">
									<image src="../../static/hb2.png" class="icon" mode="widthFix"></image>
									<view>余额支付</view>
								</view>
								<u-radio active-color="blue" :name="3" @change="radioGroupChange(3)" />
							</view>
							<view class="type_list" @click="radioGroupChange(2)">
								<view class="box_radio_group">
									<image src="../../static/wechat.png" class="icon" mode="widthFix"></image>
									<view>微信支付</view>
								</view>
								<u-radio active-color="blue" :name="2" @change="radioGroupChange(2)" />
							</view>
							<view class="type_list" @click="radioGroupChange(1)">
								<view class="box_radio_group">
									<image src="../../static/zfb2.png" class="icon" mode="widthFix"></image>
									<view>支付宝支付</view>
								</view>
								<u-radio active-color="blue" :name="1" @change="radioGroupChange(1)" />
							</view>
						</block>
					</view>
				</u-radio-group>
			</view>
		</view>


		<view class="bottom_box">
			<view class="jieusan">
				<view class="pricebox">
					<view style="color: blue;">合计: ￥{{total}}</view>
					<view class="yunfei">运费￥0</view>
				</view>
				<view class="paybtn" @click="pay">
					立即支付
				</view>
			</view>
		</view>
		<uni-pay ref="pay" height="70vh" return-url="/pages/order-detail/order-detail" logo="/static/logo.png"
			@success="onSuccess" @create="onCreate" @fail="onFail"></uni-pay>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				shangpinxinxi: [],
				paynum: 1,
				total: 0,
				addrId: [],
				type: '',
				remarks: '', //订单的备注
			}
		},
		onLoad(option) {
			let meiyi_name_tel=uni.getStorageSync('meiyi_name_tel')
			this.jingshouren=meiyi_name_tel.name+meiyi_name_tel.mobile
			this.meiyi_name_tel=meiyi_name_tel
			let checkedArr = uni.getStorageSync('checkedArr')
			this.checkedArr = checkedArr
			this.total_fun()
		},
		onShow() {
			//获取地址信息
			let addrId = uni.getStorageSync('addrId')
			if (addrId.id !== undefined) {
				this.addrId = addrId
			}
			//total获取初始的产品价格
		},
		methods: {
			total_fun(){
				console.log(this.checkedArr);
				let total = 0;
				this.checkedArr.forEach(item => {
					const price = parseFloat(item.goods_price); // 处理含小数点的字符串
					total += price * item.count;
				});
				this.total=total.toFixed(2)
			},
			//更改数量时，价格跟随变动 
			valChange(e) {
				this.total_fun()
			},

			//选择支付方式时，不同支付方式对应不同的type
			radioGroupChange(e) {
				this.type = e
			},

			//点 立即支付  
			pay() {
				if (this.type !== 1 && this.type !== 2 && this.type !== 3) {
					return uni.showToast({
						title: '请选择支付方式 !',
						icon: 'none'
					})
				}
				if (this.addrId.dizhi == undefined) {
					return uni.showToast({
						title: '请添加收货地址!',
						icon: 'none'
					})
				}
				//点 立即支付 时，同时检查 手机号对不？
				let myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
				if (!myreg.test(this.addrId.shoujihao)) {
					return uni.showToast({
						title: '手机号格式不正确',
						icon: 'none',
						mask: true
					})
				}

				// 发起支付
				if (this.type == 3) {
					uni.showToast({
						title: '还未配置余额支付 ',
						icon: 'none',
						mask: true
					})
				} else {
					this.$refs.pay.createOrder({
						provider: this.type == 1 ? 'alipay' : this.type == 2 ? 'weixin' : '', // 支付供应商
						total_fee: this.total * 100, // 支付金额，单位分 100 = 1元
						order_no: '11111', // 业务系统订单号（即你自己业务系统的订单表的订单号）
						out_trade_no: '1234', // 插件支付单号
						description: '支付描述', // 支付描述
						type: 'test', // 支付回调类型
						// qr_code: this.qr_code, // 是否强制使用扫码支付
						// openid: this.openid, // 微信公众号需要
						// custom: this.custom, // 自定义数据
					});
				}
			},
		},
	}
</script>

<style scoped lang="scss">
	.main {
		background: #f5f5f5;
		height: 100vh;
		overflow-y: scroll;
	}

	.address_box2 {
		padding: 50rpx 30rpx !important;
	}

	.address_box {
		padding: 30rpx;
		background: #fff;
		position: relative;
		display: flex;
		align-items: center;
		// margin: 20rpx 0 0;

		.location2 {
			width: 36rpx;
		}

		.right2 {
			top: 50%;
			margin-top: -20rpx !important;
		}

		.right {
			width: 16rpx;
			position: absolute;
			right: 30rpx;
			top: 65%;
			margin-top: -30rpx;
		}

		.info {
			margin-left: 20rpx;
			width: calc(100% - 20rpx - 36rpx - 50rpx);

			.title {
				font-size: 28rpx;
			}

			.info2 {
				display: flex;
				align-items: center;

				.name {
					font-weight: bold;
					font-size: 30rpx;
				}

				.mobile {
					font-size: 26rpx;
					margin-left: 30rpx;
					color: #adadad;
				}
			}

			.address {
				margin-top: 6rpx;
				font-size: 26rpx;
			}
		}

		.border {
			position: absolute;
			bottom: 0;
			width: 100%;
			left: 0;
		}
	}

	.sellerbox {
		padding: 30rpx 30rpx 0;
		background: #fff;

		.sellername {
			display: flex;
			align-items: center;
			padding: 30rpx 0;

			.seller_icon {
				width: 36rpx;
			}

			.sellername1 {
				margin-left: 10rpx;
				font-size: 26rpx;
			}
		}

		.goods_box {
			padding: 0 0 20rpx 0;

			.goods_list {
				margin: 0 0 20rpx 0;

				.goods_info {
					display: flex;

					.goodsimg {
						width: 140rpx;
						height: 140rpx;
						border-radius: 10rpx;
					}

					.info {
						width: calc(100% - 140rpx - 20rpx);
						margin-left: 20rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.goodsname {
							display: flex;
							margin: 20rpx 0;
							font-size: 28rpx;
						}

						.guige {
							margin-top: 6rpx;
							font-size: 24rpx;
							color: #adadad;
						}

						.goods_num {
							font-size: 24rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
							color: #adadad;
							text-align: right;

							.price {
								margin-bottom: 10rpx;
								font-size: 28rpx;
							}
						}
					}
				}
			}
		}
	}

	.box {
		background-color: #fff;
		margin: 20rpx 0 0;
		padding: 20rpx 30rpx;
		font-size: 28rpx;

		.list {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;

			.inputbox {
				width: 500rpx;
				text-align: right;

				input {
					font-size: 28rpx;
				}
			}
		}

		.paytype {
			.u-radio-group_box {
				width: 100%;

				.type_list {
					background: #F7F7F7;
					border-radius: 10rpx;
					margin: 20rpx 0 0;
					padding: 10rpx 0;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.box_radio_group {
						width: 100%;
						display: flex;
						align-items: center;

						.icon {
							width: 70rpx;
						}
					}
				}
			}
		}
	}

	.bottom_box {
		background: #fff;
		position: fixed;
		bottom: 0;
		width: calc(100%);
		padding: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.u-checkbox {
			font-size: 24rpx;

			.xieyi {
				font-size: 24rpx;
			}
		}

		.jieusan {
			display: flex;
			align-items: center;

			.pricebox {
				.totalprice {
					font-weight: bold;
					font-size: 28rpx;
				}

				.yunfei {
					color: #adadad;
					font-size: 24rpx;
					// margin-top: 6rpx;
					text-align: right;
				}
			}

			.paybtn {
				background: blue;
				font-size: 24rpx;
				color: #fff;
				border-radius: 50rpx;
				padding: 10rpx 20rpx;
				margin-left: 20rpx;
			}
		}
	}

	.couponshow_main {
		height: 63vh;
		// overflow-y: scroll;
	}

	.couponshow {
		// margin: 20rpx 0;
	}

	.couponshow .title {
		text-align: center;
		padding: 20rpx 0;
		border-bottom: 1px solid #F6F6F6;
	}

	.couponshow .list {
		position: relative;
		margin: 0 30rpx;
		z-index: 99;
		width: calc(100% - 80rpx - 60rpx);
		border-radius: 10rpx;
		overflow: hidden;
	}

	.couponshow_info {
		position: absolute;
		top: 0;
		bottom: 0;
		width: calc(100% - 40rpx);
		display: flex;
		flex-direction: column;
		text-align: left;
		justify-content: center;
		color: #fff;
		font-size: 24rpx;
		padding: 0 20rpx;

		>view {
			padding: 8rpx 0;
		}
	}


	.bg_12x {
		position: absolute;
		width: 100%;
		top: 0;
		z-index: -1;
		display: flex;
	}

	.list_box1 {
		display: flex;
		align-items: center;
		color: #fff;
		padding: 4rpx 20rpx 0;
	}

	.price {
		font-size: 40rpx;
		font-weight: bold;
	}

	.price text {
		font-weight: normal;
		font-size: 28rpx;
		margin: 0 20rpx 0 0;
	}

	.unit {
		font-size: 24rpx;
		margin-left: 4rpx;
	}

	.list_box1>view:nth-child(2) {
		position: relative;
		left: 20rpx;
	}

	.bg_1_1 {
		width: 110rpx;
		display: flex;
	}

	.typetitle {
		font-size: 24rpx;
		color: blue;
		position: absolute;
		left: 53%;
		margin-left: -60rpx;
		width: 100%;
		font-weight: bold;
		height: 100%;
		display: flex;
		// align-items: center;
		margin-top: 6rpx;
		justify-content: center;
		z-index: 99;
	}

	.typetitle2 {
		font-size: 24rpx;
		color: #CACCCE;
		position: absolute;
		left: 53%;
		margin-left: -60rpx;
		width: 100%;
		font-weight: bold;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 99;
	}

	.list_box2 {
		color: #fff;
		padding: 0rpx 20rpx;
		font-size: 24rpx;
	}

	.list_box3 {
		font-size: 20rpx;
		color: #fff;
		padding: 4rpx 20rpx 0;
	}

	.goshiyong {
		color: blue;
		font-weight: bold;
		font-size: 28rpx;
		position: absolute;
		width: calc(100% - 40rpx);
		height: calc(100% + 20rpx);
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.goshiyong2 {
		color: #fff;
		font-weight: bold;
		font-size: 28rpx;
		position: absolute;
		width: calc(100% - 40rpx);
		height: calc(100% + 20rpx);
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.btnbox {
		position: fixed;
		bottom: 20rpx;
		width: calc(100% - 40rpx);
	}

	.tabstitle {
		position: absolute;
		bottom: 0;
		right: 200rpx;
		z-index: 99;
		// top: 20rpx;
	}

	.couponshowbtn {
		position: absolute;
		bottom: 0rpx;
		width: 100%;
	}

	.peisong_type {
		align-items: flex-end;
		margin-top: 20rpx;
		background: #fff;

		view {
			width: 50%;
			text-align: center;
			height: 70rpx;
			line-height: 70rpx;
			font-size: 28rpx;
		}

		.active1 {
			background: rgba(252, 122, 6, 0.08);
			border-radius: 0 0 40rpx 0;
		}

		.active2 {
			background: rgba(252, 122, 6, 0.08);
			border-radius: 0 0 0 40rpx;
		}
	}
</style>